<template>
  <div class="content" :style="{'min-height':height}">
    <div class="reading_breadth">

    </div>

    <!--		<div class="mask" v-if="mask_flag"  @mousewheel.prevent="mask_wheel"></div>-->
    <!--		<div class="mask_box"  v-if="mask_flag">-->
    <!--			<span class="mask_box_tit">测试须知</span>-->
    <!--			<div class="mask_box_content">请认真阅读题干并记住加点字，1分钟后自动进入答题页！</div>-->
    <!--			<div class="mask_box_close" v-if="time>=0">{{time}}s</div>-->
    <!--			<div class="mask_box_close" v-if="time<0" @click="closeMask">X</div>-->
    <!--		</div>-->

    <!--		<div class="know_mask" v-if="knowMaskflag" @click="closeKnowmask" @mousewheel.prevent="mask_wheel"></div>-->
    <!--		<div class="know_mask_box" v-if="knowMaskflag">-->
    <!--			<div class="know_mask_box_content">-->
    <!--				<div :class="{txt_change1:img_change}">词</div>-->
    <!--				<div :class="{txt_change2:img_change}">组</div>-->
    <!--				<img @click.stop="changeimg()" :class="{special_change:img_change}"  class="change_img" src="@/assets/image/lesson/change.png" alt="">-->
    <!--			</div>-->
    <!--			<div class="know_mask_tips">-->
    <!--				<div class="know_mask_tips_box">-->
    <!--					<img src="@/assets/image/lesson/quxian.png" alt="">-->
    <!--				</div>-->
    <!--				<div class="know_mask_tips_txt">-->
    <!--					<div>切换键</div>-->
    <!--					<div>可切换所组词的字的顺序</div>-->
    <!--				</div>-->
    <!--			</div>-->
    <!--		</div>-->

    		 <router-view @closeTips="closeTips"
    		  @countdown2="countdown2"
    		  @changelabel="changelabel"
    		  ref="lessonchild"/>
  </div>
</template>

<script>
import axios from "axios"
import qs from 'qs'

export default {
  name: 'floor',
  data() {
    return {
      height: 0,
      tips_flag: true,
      mask_flag: true,
      time: 3,
      timeNo: null,
      timeNo2: null,
      minute: '00',
      second: '00',
      label: '题干',
      knowMaskflag: true,
      img_change: false
    }
  },
  mounted() {
    if (this.$route.name == "lessonSubject") {
      this.mask_flag = true
    } else {
      this.mask_flag = false
    }
    if (this.$route.name == "lessonKnowSubject") {
      this.knowMaskflag = true
    } else {
      this.knowMaskflag = false
    }
    clearInterval(this.timeNo)
    clearInterval(this.timeNo2)
    this.$nextTick(() => {
      // this.$refs['lessonchild'].lessonchild()
    })

    // 改变窗口大小时重新设置 rem

    this.countdown()
  },
  beforeDestroy() {
    clearInterval(this.timeNo)
    clearInterval(this.timeNo2)
  },
  methods: {
    closeKnowmask() {
      this.knowMaskflag = false
    },
    changeimg() {
      this.img_change = !this.img_change
    },
    changelabel(str) {
      // console.log(str)
      this.label = str
    },
    closeMask() {
      this.mask_flag = false
      this.countdown2(0.05, () => {
        if (this.$route.name == "lessonSubject") {
          this.$refs['lessonchild'].beginAnwser()
        }
      })
    },
    countdown2(time, fx) {
      console.log(time)
      var maxtime = time * 60;
      console.log(this.timeNo2)
      this.timeNo2 = setInterval(() => {
        if (maxtime >= 0) {
          this.minute = Math.floor(maxtime / 60) > 9 ? Math.floor(maxtime / 60) : '0' + Math.floor(maxtime / 60);
          this.second = Math.floor(maxtime % 60) > 9 ? Math.floor(maxtime % 60) : '0' + Math.floor(maxtime % 60);
          maxtime--;
        } else {
          clearInterval(this.timeNo2);
          if (fx) {
            fx()
          }
        }
      }, 1000)

    },
    //弹窗倒计时
    countdown(fx) {
      var that = this
      this.timeNo = setInterval(() => {
        if (this.time == 0) {
          this.time--
          clearInterval(this.timeNo)
          if (fx) {
            fx()
          }
          return
        }
        this.time--
      }, 1000)
    },
    mask_wheel() {
    },
    closeTips() {

      this.tips_flag = arguments[0].flag
    }

  },
  watch: {}
}
</script>
<style lang="less" scoped>
.content {
  position: relative;
  font-size: .26rem;
  color: #fff;
  background: url("../../assets/image/lesson/lesback.png") no-repeat;
  background-size: 100% 100%;

  .reading_breadth {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3.66rem;
    height: 2.06rem;
    background: url("../../assets/image/lesson/breadth.png") no-repeat;
    background-size: 100% 100%;
  }

}

.mask {
  width: 100vw;
  height: 100vh;
  background: black;
  opacity: 0.7;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.mask_box {
  width: 4.5rem;
  height: 2.15rem;
  background: #F3F3F5;
  border-radius: 0.1rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background-image: url(../../assets/image/lesson/pupo.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 1.49rem 1.24rem;
  box-sizing: border-box;
  padding-top: 0.48rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  .mask_box_tit {
    font-size: 0.21rem;
    font-weight: bold;
    color: #434343;
    border-bottom: 0.04rem solid #FFD0D0;
    margin-bottom: 0.39rem;
  }

  .mask_box_content {
    font-size: 0.18rem;
    font-weight: 400;
    color: #4B4B4B;
    width: 2.63rem;
    text-align: center;
  }

  .mask_box_close {
    cursor: pointer;
    width: 0.31rem;
    height: 0.31rem;
    background: #FFFFFF;
    border-radius: 50%;
    position: absolute;
    right: -0.155rem;
    top: -0.155rem;
    text-align: center;
    font-size: 0.14rem;
    line-height: 0.31rem;
    color: #683AEB;
  }
}

.know_mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: black;
  opacity: 0.8;
  z-index: 9;
}

.know_mask_box {
  width: 2.69rem;
  height: 1.13rem;
  background: #F3F3F5;
  border-radius: 0.1rem;
  position: absolute;
  left: 1.3rem;
  height: 1.57rem;
  z-index: 10;
  box-sizing: border-box;
  padding: 0.47rem 0.57rem 0 0.56rem;

  .know_mask_box_content {
    width: 100%;
    border-bottom: 0.01rem solid #636363;
    font-size: 0.18rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;

    & > div:nth-child(1) {
      transition: all 1s;
      transform: translateX(0rem);
    }

    & > div:nth-child(2) {
      transition: all 1s;
      transform: translateX(-0rem);
    }

    & > .txt_change1 {
      transform: translateX(0.18rem) !important;
    }

    & > .txt_change2 {
      transform: translateX(-0.18rem) !important;
    }

    & > img {
      width: 0.2rem;
      height: 0.19rem;
      margin-left: auto;
      margin-bottom: 0.04rem;
      cursor: pointer;
      transition: all 1s;
      transform: rotateY(0deg);
    }

    & > .special_change {
      transform: rotateY(180deg);
    }
  }

  .know_mask_tips {
    width: 1.07rem;
    height: 0.28rem;
    position: absolute;
    right: -0.6rem;
    top: 0.18rem;

    .know_mask_tips_box {
      width: 100%;
      height: 100%;

      & > img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .know_mask_tips_txt {
      color: #FFB33A;
      position: absolute;
      right: -2rem;
      top: 0;

      & > div:nth-child(1) {
        font-size: 0.21rem;
        margin-bottom: 0.19rem;
      }

      & > div:nth-child(2) {
        font-size: 0.16rem;
        // margin-bottom: 0.19rem;
      }
    }
  }
}
</style>
